<template>
  <div style="padding: 15px">
    <el-form v-model="view">
      <el-form-item label="页面名称">
        <el-input v-model="view.name" placeholder="请输入页面名称"/>
      </el-form-item>
      <el-form-item label="描述">
        <el-input type="textarea" rows="8" v-model="view.remark" placeholder="请输入描述"/>
      </el-form-item>
      <el-form-item label="关联业务">
        <el-select v-model="view.bizType" @change="bizTypeChange">
          <el-option value="product" label="设备监控"></el-option>
          <el-option value="room" label="机房监控"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="bizLabel" v-if="view.bizType">
        <el-select v-model="view.bizId" :loading="bizListLoading" filterable clearable>
          <el-option v-for="item in bizList" :key="item.id" :value="item.id" :label="item.name"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import {listProduct} from "@/api/biz/product";
  import {listRoom} from "@/api/biz/room";

  export default {
    props: {
      view: {
        type: Object
      }
    },
    data() {
      return {
        bizList: [],
        bizListLoading: false,
        bizMap: {
          'product': {
            label: '产品',
            listMethod: listProduct
          },
          'room': {
            label: '机房',
            listMethod: listRoom
          }

        }
      }
    },
    computed: {
      bizLabel() {
        if (this.view.bizType) {
          return this.bizMap[this.view.bizType].label
        }
        return '';
      }
    },
    mounted() {

    },
    methods: {
      init() {
        console.log('this.view.bizType', this.view.bizType)
        this.bizTypeChange();
      },
      bizTypeChange(val) {
        if (this.view.bizType) {
          this.bizListLoading = true;
          this.bizMap[this.view.bizType].listMethod().then(res => {
            this.bizList = res.rows.map(item => {
              return {
                id: item.id,
                name: item.name,
              }
            });
            console.log(this.bizList);
          }).finally(() => {
            this.bizListLoading = false;
          })
        }
      },

    }
  }
</script>
